<template>
    <div class="my">
      <div class="my-header">
        <div class="my-banner">
        </div>
        <div class="my-bankuai">
          <div class="my-touxiang">
            <i class="iconfont icon-touxiang touXiang"></i>
          </div>
          <!--<p class="my-gongsi">-->
            <!--{{name}}({{company}})-->
          <!--</p>-->
          <van-cell-group class="groups" style="padding-top:40px">
            <van-field
              :value="names"
              label="姓名"
              disabled
            />
            <!--v-if="phoneshow"-->
            <van-field
              :value="phone"
              label="手机号"
              disabled
            />
            <van-field
              :value="username"
              label="账号"
              disabled
            />
          </van-cell-group>
          <van-row style="margin-top:30px;">
            <van-col span="24" style="margin:10px 0;">
              <van-button type="danger" class="my-btn"  @click="closeShow=true">退出登录</van-button>
            </van-col>
          </van-row>
        </div>

        </div>

      <!--退出弹层-->
      <van-popup v-model="closeShow"   :overlay="true" class="closetc">
        <p style="">是否退出该账号！</p>

        <!--按钮-->
        <van-row >
          <van-col span="12" style="padding:0 10px">
            <van-button class="maskBtn"   @click="closeShow=false">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px">
            <van-button  type="primary"   class="maskBtn maskBtn2" @click="removeFn">确认</van-button>
          </van-col>
        </van-row>

      </van-popup>

    </div>
</template>

<script>

    export default {
        name: "my",
        data(){
          return {
            name:"",
            company:"",
            closeShow:false,
            phoneshow:true,
            username:localStorage.getItem('username'),
              phone:'',
              names:localStorage.getItem('names'),
            empid:parseInt(localStorage.getItem('empId')),
          }
        },
      methods:{
        removeFn(){

          /* localStorage.setItem("username","");//清掉用户名
            localStorage.setItem("isLogin","0");//登录状态 0-未登录 1-登录
            localStorage.setItem("apiKey","");//把登录后的token清掉*/
          this.closeShow=false
          localStorage.clear();//清楚所有缓存数据

          // console.log("解除绑定");

          this.$router.push({name: 'login'});

        },
        getphone(){
          var that = this;
          var userid = localStorage.getItem('user_id');
          // console.log(userid)
          this.$http.passport.get('/account/'+ userid)
            .then((res)=>{
              if(!res.data.code){//mobile
                // console.log(res.data.data)
                // localStorage.setItem('empPhone',res.data.data.mobile)
                that.phone = res.data.data.mobile
              }else{
                that.phone = '***********'
              }
              // console.log(res)
            }).catch((err)=>{
              console.log(err)
            })
        }
      },
      mounted(){
        if(this.empid){
          this.getphone();
        }else{
          this.phone = localStorage.getItem('phone');
        }

          this.name=localStorage.getItem("username");
          this.company=localStorage.getItem("company");
      }
    }
</script>

<style scoped>

  .my-header{
    /*background: #fff;*/
  }
  .my-banner{
    background: #3C8DBC;
    height:190px;
    position: relative;
  }
  .icon-shezhi1{
    position: absolute;
    font-size:24px;
    color:#fff;
    top:10px;
    right:10px;
  }
  .my .touXiang{

    font-size:60px;

  }
  .my-touxiang{
    border-radius: 50%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    margin: -32px auto 50px auto;
    position: absolute;
    top:0;
    left:125px;
    z-index:999;
  }
  .my-gongsi{
    /*margin:0;*/
    font-weight: bold;
    font-size:14px;
    padding:10px 0;
  }
  .my-btn{
    width:90%;height:40px;line-height: 40px;
    background: #3C8DBC;
    border-color:#3C8DBC;
  }
  .closetc{
    width:320px;padding:10px 0;height:auto;background: #fff!important;border-radius: 5px;
  }
  .closetc>p{
    color:#000;padding:20px 0;
    font-size:16px;
  }

  .maskBtn{
    width:100%;height:38px;line-height: 38px;

  }
  .maskBtn2{
    background: #3C8DBC;
    border-color:#3C8DBC;
  }
  .my-bankuai{
    width:320px;
    margin:-90px auto 0 auto;
    background: #fff;
    position: relative;
    z-index: 999;
    border-radius: 3px;
    padding-bottom:10px;
  }
  .groups .van-cell {
    font-size: 0.4rem!important;
  }
</style>
